<template>
  <div class="collection">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <div class="header_left">
          <router-link tag="a" :to="rou"
            ><img
              :src="require('../assets/img/bar_icon_back_black.png')"
              alt=""
          /></router-link>
        </div>
        <div class="header_center">收藏</div>
        <div class="header_right"></div>
      </div>
      <!-- 头部 end   -->

      <!-- 主体部分 star  -->
      <div class="main" v-if="collectionLists.length > 0">
        <ul>
          <li v-for="item in collectionLists" :key="item.id">
            <a  @click="listId(null,item[0].id)">
              <div class="img">
                <img :src="item[0].img" alt="" />
                <div class="vip"></div>
              </div>
              <div class="word">
                <p>{{ item[0].name }}</p>
                <div class="tip">
                  <p>经典...</p>
                  <p>175555次</p>
                </div>
              </div>
            </a>
            <div class="del" @click="del(item[0].id)">
              <img :src="require('../assets/img/oioio.webp')" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 主体部分 end  -->

      <!-- 没有内容 star -->
      <div class="null" v-if="!(collectionLists.length > 0)">
        <img :src="require('../assets/img/iv_mei_neirong.png')" alt="" />
        <p>暂无记录哦~</p>
      </div>
      <!-- 没有内容 end -->
    </div>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
export default {
  props: ["collist"],
  data() {
    return {
      rou: null,
      allLists: [], //接受所有的故事
      colleids: JSON.parse(localStorage.getItem("collectionids")) || [], //接受localStorage里的收藏id
      collectionLists: [], //收藏列表
    };
  },
  methods: {
    del(id) {
      let index = this.colleids.findIndex((item) => item == id);
      console.log(index);
      this.colleids.splice(index, 1);
      this.collectionLists.splice(index, 1);
      console.log(this.colleids);
      window.localStorage.setItem(
        "collectionids",
        JSON.stringify(this.colleids)
      );
      this.$emit("del", id);
    },
     listId(id,listenId){
      this.$emit("list-id",[id,listenId])
    },
  },

  created() {
    this.rou = this.$route.query.rou;
    getJsonData().then((data) => {
      this.allLists = data.allLists;
      this.colleids = JSON.parse(localStorage.getItem("collectionids"));
      console.log(this.colleids);
      for (var j = 0; j < this.colleids.length; j++) {
        let arr = this.allLists.filter((item) => item.id == this.colleids[j]);
        this.collectionLists.push(arr);
      }
      console.log(this.collectionLists);
    });
  },
   watch:{
      "collist":function(){
        this.collectionLists=[]
          console.log(this.collist);
          for(var j=0;j< this.collist.length;j++){
                if(this.collectionLists.indexOf(this.collist[j]==-1)){

                    let arr=this.allLists.filter(item=>item.id==this.collist[j])
                    this.collectionLists.push(arr)
                }else{
                    let index=this.collectionLists.findIndex(item=>item.id==this.collist[j])
                    this.collectionLists.splice(index,1)
                }
          }
      }
  },
};
</script>

<style lang="scss" scoped>
.collection {
  background-color: #f4f4f4;
  height: 100%;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    /* padding-bottom: 60px; */
    .null {
      text-align: center;
      transform: translateY(100%);
      img {
        width: 150px;
      }
      p {
        margin-top: 20px;
        font-size: 26px;
        color: #555555;
      }
    }
  }
  .header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 16px;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .header_left img {
    height: 20px;
    display: block;
  }
  .header_center {
    font-size: 18px;
    font-weight: 500;
  }
  .header_right a {
    color: #3e3e3e;
    font-size: 17px;
    font-weight: 600;
  }
  .main {
    padding: 0 16px 52px;
  }
  /* .main ul{} */
  .main ul li {
    padding: 7px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main ul li a {
    display: flex;
    flex: 1;
  }
  .main ul li .img {
    position: relative;
  }
  .main ul li .img img {
    height: 96px;
    border-radius: 8px;
    display: block;
  }
  .main ul li .word {
    color: #141414;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .main ul li .word > p {
    height: 44px;
    line-height: 44px;
  }
  .main ul li .word .tip {
    font-size: 12px;
    display: flex;
    color: #999;
  }
  .main ul li .tip p:nth-child(1) {
    padding: 0 8px 0 16px;
    background: url(../assets/img/xiao.png) left center no-repeat;
    background-size: 13px;
  }
  .main ul li .tip p:nth-child(2) {
    padding-left: 16px;
    background: url(../assets/img/ic_listen_gray.webp) left center no-repeat;
    background-size: 13px;
  }
  .main ul li .del img {
    display: block;
    width: 20px;
  }
}
</style>